﻿<div class="mt-16" style="@ContainerStyle">
    <MudImage Src="@AssistantAvatar" Height="88" Width="88" Elevation="25" Class="rounded-lg mb-4 mt-8" Style="@AvatarStyle" />

    <MudText Typo="Typo.h3" Class="mb-9">@AssistantName</MudText>
    <MudText Typo="Typo.body1" Class="mb-2">Hey @UserName! 👋 How can I help you today? Need info, advice, or just a chat?</MudText>
    <MudText Typo="Typo.body1">I'm here to help you</MudText>
</div>

@code 
{
    [Parameter] public string AssistantName { get; set; } = string.Empty;
    [Parameter] public string UserName { get; set; } = string.Empty;
    [Parameter] public string AssistantAvatar { get; set; } = string.Empty;

    private string ContainerStyle => $"display: flex; flex-direction: column; align-items: center;";
    private string AvatarStyle => $"border: 2px solid var(--mud-palette-primary);";
}
